<template>
  <div class="app-container">
    <!--查询-->
    <el-form :inline="true" :model="employeeQuery" class="demo-form-inline">
      <el-form-item label="名字">
        <el-select v-model="employeeQuery.name" filterable clearable placeholder="输入名字">
          <el-option
            v-for="user in userList"
            :key="user.id"
            :label="user.name"
            :value="user.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号">
        <el-select v-model="employeeQuery.userId" filterable clearable placeholder="输入工号">
          <el-option
            v-for="user in userList"
            :key="user.id"
            :label="user.workId"
            :value="user.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="employeeQuery.status" style="margin-left: 10px;width: 80%" placeholder="请选择" clearable>
          <el-option
            v-for="status in statusEnum"
            :key="status.value"
            :label="status.label"
            :value="status.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="employeeList" style="width: 100%;margin-top:30px;" border>
      <el-table-column type="expand">
        <template #default="props">
          <el-form label-position="left" inline class="demo-table-expand" label-width="80px">
            <el-form-item label="工号"><span>{{ props.row.workId }}</span></el-form-item>
            <el-form-item label="名字"><span>{{ props.row.name }}</span></el-form-item>
            <el-form-item label="邮箱"><span>{{ props.row.email }}</span></el-form-item>
            <el-form-item label="电话"><span>{{ props.row.phone }}</span></el-form-item>
            <el-form-item label="入职时间"><span> <el-date-picker readonly v-model="props.row.begin" type="date" placeholder="入职时间点"></el-date-picker></span></el-form-item>
            <el-form-item label="离职时间"><span> <el-date-picker readonly v-model="props.row.end" type="date" placeholder="离职时间点"></el-date-picker></span></el-form-item>
            <el-form-item label="招聘形式"><span>
              <el-select v-model="props.row.form" disabled style="width: 80%" placeholder="请选择">
            <el-option
              v-for="status in employeeFormEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
            </span></el-form-item>
            <el-form-item label="状态"><span>
              <el-select v-model="props.row.status" disabled style="width: 80%" placeholder="请选择">
            <el-option
              v-for="status in statusEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
            </span></el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="workId" label="工号"></el-table-column>
      <el-table-column align="center" prop="name" label="名字"></el-table-column>
      <el-table-column align="center" prop="email" label="邮箱"></el-table-column>
      <el-table-column align="center" prop="phone" label="电话"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getEmployees"
      />
    </div>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit employee':'New employee'">
      <el-form :model="employee" label-width="80px" label-position="left">
        <el-form-item label="入职时间">
          <el-date-picker
            v-model="employee.begin"
            type="date"
            value-format="timestamp"
            placeholder="入职时间点">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="离职时间">
          <el-date-picker
            v-model="employee.end"
            type="date"
            value-format="timestamp"
            placeholder="离职时间点">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="招聘形式">
          <el-select v-model="employee.form" style="margin-left: 10px;width: 80%" placeholder="请选择">
            <el-option
              v-for="status in employeeFormEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="employee.status" style="margin-left: 10px;width: 80%" placeholder="请选择">
            <el-option
              v-for="status in statusEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmEmployee">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getEmployees, modifyEmployee } from '@/api/employee'
import { deepClone } from '@/utils'
import { getUserList } from '@/api/user'

const defaultEmployee = {
  id: '',
  begin: {},
  end: {},
  form: '',
  status: ''
}

export default {
  name: 'EmployeeManager',
  components: {},
  data() {
    return {
      employee: Object.assign({}, defaultEmployee),
      employeeList: [],
      userList: [],
      employeeQuery: {},
      statusEnum: [
        {value: 'QUIT', label: "离职"},
        {value: 'WORKING', label: "入职"},
        {value: 'NOTENTRY', label: "未入职"},
        {value: 'INTERNSHIP', label: "实习"},
        {value: 'OTHER', label: "其他"},
      ],
      employeeFormEnum: [
        {value: 'SCHOOL', label: "校招"},
        {value: 'SOCIAL', label: "社招"},
        {value: 'OTHER', label: "其他"}
      ],
      checkStrictly: false,
      total: 100,
      page: 1,
      limit: 20,
      dialogType: 'new',
      dialogVisible: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async getEmployees(page = 1){
      const offset = this.limit * (page - 1);
      const res = await getEmployees(this.employeeQuery, offset, this.limit)
      this.employeeList = res.data.rows
      this.total = res.data.total
    },
    onSubmit() {
      this.getEmployees()
    },
    async getUserList() {
      const res = await getUserList()
      this.userList = res.data
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.checkStrictly = true
      this.employee = deepClone(scope.row)
      this.$nextTick(() => {
        // set checked state of a node not affects its father and child nodes
        this.checkStrictly = false
      })
    },
    async confirmEmployee() {
      const id = this.employee.id
      const begin = this.employee.begin
      const end = this.employee.end
      const form = this.employee.form
      const status = this.employee.status
      const data = {id: id, begin: begin, end: end, form: form, status: status}
      await modifyEmployee(data)
      for (let index = 0; index < this.employeeList.length; index++) {
        if (this.employeeList[index].id === this.employee.id) {
          this.employeeList.splice(index, 1, Object.assign({}, this.employee))
          break
        }
      }
      console.log(data)
      this.dialogVisible = false
      await this.getEmployees()
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: '操作成功',
        type: 'success'
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getEmployees()
    this.getUserList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}

</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
